<template>
  <ul class="todo-list">
    <li v-for="item in showList" :key="item.id" :class="{completed:item.completed}">
      <div class="view">
        <input class="toggle" type="checkbox" :checked="item.completed" @change="changeDone(item.id)" />
        <label>{{item.content}}</label>
        <button class="destroy" @click="delById(item.id)"></button>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import todosStore from '@/stores/todos'
import { toRefs, watch } from 'vue-demi'

// 获取 todos 仓库实例
const todos = todosStore()
// 解构仓库状态和方法
const { showList, changeDone, delById } = toRefs(todos)

watch(todos, () => {
  localStorage.setItem('todos-list', JSON.stringify(todos.list))
  localStorage.setItem('todos-status', todos.status)
})

</script>
